<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HexHub - 开发与运维一体化工具</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background-color: #f8fafc;
            color: #1e293b;
            line-height: 1.6;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #3b82f6 0%, #6366f1 50%, #8b5cf6 100%);
        }
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .highlight-text {
            background: linear-gradient(120deg, #60a5fa 0%, #a78bfa 100%);
            background-repeat: no-repeat;
            background-size: 100% 40%;
            background-position: 0 88%;
        }
        .section-divider {
            height: 80px;
            width: 100%;
            background: linear-gradient(to right, #3b82f6, #6366f1, #8b5cf6);
            -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 1200 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z' opacity='.25' fill='%23000000'/%3E%3Cpath d='M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z' opacity='.5' fill='%23000000'/%3E%3Cpath d='M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z' fill='%23000000'/%3E%3C/svg%3E");
            mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 1200 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z' opacity='.25' fill='%23000000'/%3E%3Cpath d='M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z' opacity='.5' fill='%23000000'/%3E%3Cpath d='M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z' fill='%23000000'/%3E%3C/svg%3E");
            background-size: cover;
            background-position: center;
        }
        .mermaid {
            background-color: white;
            border-radius: 12px;
            padding: 24px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
        .cta-button {
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.3), 0 2px 4px -1px rgba(59, 130, 246, 0.1);
        }
        .cta-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.3), 0 4px 6px -2px rgba(59, 130, 246, 0.1);
        }
    </style>
</head>
<body>
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 md:py-32 px-4 md:px-0">
        <div class="container mx-auto max-w-6xl px-4">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <h1 class="text-4xl md:text-5xl font-bold mb-4 leading-tight">HexHub</h1>
                    <p class="text-xl md:text-2xl font-light mb-8 text-blue-100">开发与运维一体化工具</p>
                    <p class="text-lg text-blue-100 mb-8">专为程序员和运维人员设计的跨平台桌面客户端，整合数据库管理、SSH/SFTP、Docker容器操作等功能，简化开发与运维流程</p>
                    <div class="flex flex-col sm:flex-row gap-4">
                        <a href="https://www.hexhub.cn/" class="bg-white text-blue-600 font-bold py-3 px-6 rounded-lg cta-button inline-flex items-center justify-center">
                            <i class="fas fa-download mr-2"></i> 立即下载
                        </a>
                        <a href="#features" class="bg-transparent border-2 border-white text-white font-bold py-3 px-6 rounded-lg hover:bg-white hover:text-blue-600 transition duration-300 inline-flex items-center justify-center">
                            <i class="fas fa-info-circle mr-2"></i> 了解详情
                        </a>
                    </div>
                </div>
                <div class="md:w-1/2 flex justify-center">
                    <div class="bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-2xl p-6 shadow-2xl max-w-md">
                        <div class="mermaid" data-processed="true">
                            graph TD
                            A[HexHub] --> B[数据库管理]
                            A --> C[SSH/SFTP]
                            A --> D[Docker管理]
                            A --> E[系统监控]
                            B --> B1[MySQL]
                            B --> B2[PostgreSQL]
                            B --> B3[SQLite]
                            C --> C1[密码认证]
                            C --> C2[私钥认证]
                            C --> C3[2FA认证]
                            D --> D1[容器管理]
                            D --> D2[资源监控]
                            D --> D3[日志分析]
                            E --> E1[CPU监控]
                            E --> E2[内存监控]
                            E --> E3[网络监控]
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="section-divider"></div>

    <!-- Features Section -->
    <section id="features" class="py-16 bg-white">
        <div class="container mx-auto max-w-6xl px-4">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4 text-gray-800">核心功能</h2>
                <p class="text-lg text-gray-600 max-w-2xl mx-auto">HexHub 为开发者与运维人员提供全方位的工具集成</p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- Feature 1 -->
                <div class="bg-gray-50 rounded-xl p-6 transition-all duration-300 feature-card">
                    <div class="bg-blue-100 w-12 h-12 rounded-lg flex items-center justify-center mb-4 text-blue-600">
                        <i class="fas fa-database text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-gray-800">数据库管理</h3>
                    <p class="text-gray-600 mb-4">支持 MySQL、PostgreSQL、SQLite 等，提供智能 SQL 编辑器，具备自动补全、语法高亮和快速数据导入导出，处理百万级数据流畅。</p>
                    <ul class="space-y-2 text-gray-600">
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>智能SQL编辑器</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>百万级数据处理</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>多格式数据导出</span>
                        </li>
                    </ul>
                </div>
                
                <!-- Feature 2 -->
                <div class="bg-gray-50 rounded-xl p-6 transition-all duration-300 feature-card">
                    <div class="bg-purple-100 w-12 h-12 rounded-lg flex items-center justify-center mb-4 text-purple-600">
                        <i class="fas fa-terminal text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-gray-800">SSH/SFTP 连接</h3>
                    <p class="text-gray-600 mb-4">支持密码、私钥、2FA 认证，跨服务器文件传输，拖拽上传下载如同本地操作。</p>
                    <ul class="space-y-2 text-gray-600">
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>多种认证方式</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>拖拽文件传输</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>跨服务器操作</span>
                        </li>
                    </ul>
                </div>
                
                <!-- Feature 3 -->
                <div class="bg-gray-50 rounded-xl p-6 transition-all duration-300 feature-card">
                    <div class="bg-indigo-100 w-12 h-12 rounded-lg flex items-center justify-center mb-4 text-indigo-600">
                        <i class="fab fa-docker text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-gray-800">Docker 管理</h3>
                    <p class="text-gray-600 mb-4">提供图形化容器管理，实时监控 CPU、内存、IO，日志支持关键字过滤。</p>
                    <ul class="space-y-2 text-gray-600">
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>容器可视化操作</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>资源实时监控</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>日志智能分析</span>
                        </li>
                    </ul>
                </div>
                
                <!-- Feature 4 -->
                <div class="bg-gray-50 rounded-xl p-6 transition-all duration-300 feature-card">
                    <div class="bg-green-100 w-12 h-12 rounded-lg flex items-center justify-center mb-4 text-green-600">
                        <i class="fas fa-chart-line text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-gray-800">系统监控</h3>
                    <p class="text-gray-600 mb-4">可视化服务器性能面板，实时显示网速、CPU、内存等指标，帮助您快速定位系统瓶颈。</p>
                    <ul class="space-y-2 text-gray-600">
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>实时性能监控</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>多维度指标</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>历史数据对比</span>
                        </li>
                    </ul>
                </div>
                
                <!-- Feature 5 -->
                <div class="bg-gray-50 rounded-xl p-6 transition-all duration-300 feature-card">
                    <div class="bg-yellow-100 w-12 h-12 rounded-lg flex items-center justify-center mb-4 text-yellow-600">
                        <i class="fas fa-sync-alt text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-gray-800">资产云同步</h3>
                    <p class="text-gray-600 mb-4">配置信息云端同步，团队协作更高效，设备切换无缝衔接，工作不受地点限制。</p>
                    <ul class="space-y-2 text-gray-600">
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>团队配置共享</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>多设备同步</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>加密存储</span>
                        </li>
                    </ul>
                </div>
                
                <!-- Feature 6 -->
                <div class="bg-gray-50 rounded-xl p-6 transition-all duration-300 feature-card">
                    <div class="bg-red-100 w-12 h-12 rounded-lg flex items-center justify-center mb-4 text-red-600">
                        <i class="fas fa-palette text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-gray-800">多窗口与主题</h3>
                    <p class="text-gray-600 mb-4">支持多标签操作，亮暗主题自由切换，打造舒适的工作环境，减少长时间工作的视觉疲劳。</p>
                    <ul class="space-y-2 text-gray-600">
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>多标签管理</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>亮暗主题切换</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>自定义界面</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <!-- Use Cases Section -->
    <section class="py-16 bg-gray-50">
        <div class="container mx-auto max-w-6xl px-4">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4 text-gray-800">应用场景</h2>
                <p class="text-lg text-gray-600 max-w-2xl mx-auto">HexHub 如何提升您的工作效率？</p>
            </div>
            
            <div class="grid md:grid-cols-3 gap-8">
                <!-- Use Case 1 -->
                <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
                    <div class="flex items-center mb-4">
                        <div class="bg-blue-100 w-10 h-10 rounded-lg flex items-center justify-center mr-4 text-blue-600">
                            <i class="fas fa-database"></i>
                        </div>
                        <h3 class="text-lg font-bold text-gray-800">数据库维护</h3>
                    </div>
                    <p class="text-gray-600 mb-4">开发者使用智能 SQL 编辑器快速调试复杂查询，导出数据为 Excel。你是否需要高效管理数据库？</p>
                    <div class="bg-blue-50 rounded-lg p-4">
                        <div class="text-sm text-blue-800 font-medium mb-2">典型工作流程</div>
                        <ol class="text-sm text-gray-600 space-y-1">
                            <li class="flex">
                                <span class="text-blue-500 mr-2">1.</span> 连接数据库服务器
                            </li>
                            <li class="flex">
                                <span class="text-blue-500 mr-2">2.</span> 编写和优化SQL查询
                            </li>
                            <li class="flex">
                                <span class="text-blue-500 mr-2">3.</span> 执行并分析结果
                            </li>
                            <li class="flex">
                                <span class="text-blue-500 mr-2">4.</span> 导出数据为多种格式
                            </li>
                        </ol>
                    </div>
                </div>
                
                <!-- Use Case 2 -->
                <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
                    <div class="flex items-center mb-4">
                        <div class="bg-purple-100 w-10 h-10 rounded-lg flex items-center justify-center mr-4 text-purple-600">
                            <i class="fas fa-server"></i>
                        </div>
                        <h3 class="text-lg font-bold text-gray-800">服务器运维</h3>
                    </div>
                    <p class="text-gray-600 mb-4">运维人员通过 SSH 远程管理服务器，实时监控 Docker 容器性能，优化资源分配。</p>
                    <div class="bg-purple-50 rounded-lg p-4">
                        <div class="text-sm text-purple-800 font-medium mb-2">典型工作流程</div>
                        <ol class="text-sm text-gray-600 space-y-1">
                            <li class="flex">
                                <span class="text-purple-500 mr-2">1.</span> 建立SSH连接
                            </li>
                            <li class="flex">
                                <span class="text-purple-500 mr-2">2.</span> 部署应用和配置
                            </li>
                            <li class="flex">
                                <span class="text-purple-500 mr-2">3.</span> 监控容器资源使用
                            </li>
                            <li class="flex">
                                <span class="text-purple-500 mr-2">4.</span> 优化性能参数
                            </li>
                        </ol>
                    </div>
                </div>
                
                <!-- Use Case 3 -->
                <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
                    <div class="flex items-center mb-4">
                        <div class="bg-green-100 w-10 h-10 rounded-lg flex items-center justify-center mr-4 text-green-600">
                            <i class="fas fa-file-upload"></i>
                        </div>
                        <h3 class="text-lg font-bold text-gray-800">文件管理</h3>
                    </div>
                    <p class="text-gray-600 mb-4">通过 SFTP 跨服务器批量传输文件，简化多环境部署。你的团队如何处理跨服务器文件同步？</p>
                    <div class="bg-green-50 rounded-lg p-4">
                        <div class="text-sm text-green-800 font-medium mb-2">典型工作流程</div>
                        <ol class="text-sm text-gray-600 space-y-1">
                            <li class="flex">
                                <span class="text-green-500 mr-2">1.</span> 配置SFTP连接
                            </li>
                            <li class="flex">
                                <span class="text-green-500 mr-2">2.</span> 拖拽上传/下载文件
                            </li>
                            <li class="flex">
                                <span class="text-green-500 mr-2">3.</span> 批量操作多个服务器
                            </li>
                            <li class="flex">
                                <span class="text-green-500 mr-2">4.</span> 同步团队配置
                            </li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Advantages Section -->
    <section class="py-16 bg-white">
        <div class="container mx-auto max-w-6xl px-4">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4 text-gray-800">优势与特色</h2>
                <p class="text-lg text-gray-600 max-w-2xl mx-auto">为什么选择 HexHub？</p>
            </div>
            
            <div class="grid md:grid-cols-2 gap-8 items-center">
                <div class="space-y-6">
                    <div class="flex items-start">
                        <div class="bg-blue-100 w-12 h-12 rounded-lg flex items-center justify-center mr-4 text-blue-600 flex-shrink-0">
                            <i class="fas fa-layer-group text-xl"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold mb-2 text-gray-800">一体化工具集</h3>
                            <p class="text-gray-600">HexHub 整合数据库、SSH、Docker 管理于一体，优于 Navicat、FinalShell 等单一工具，界面友好且支持中文。</p>
                        </div>
                    </div>
                    
                    <div class="flex items-start">
                        <div class="bg-purple-100 w-12 h-12 rounded-lg flex items-center justify-center mr-4 text-purple-600 flex-shrink-0">
                            <i class="fas fa-bolt text-xl"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold mb-2 text-gray-800">高效文件传输</h3>
                            <p class="text-gray-600">其自研 ZMODEM 协议确保高效文件传输，大幅提升工作效率，特别是在大文件传输场景下表现优异。</p>
                        </div>
                    </div>
                    
                    <div class="flex items-start">
                        <div class="bg-indigo-100 w-12 h-12 rounded-lg flex items-center justify-center mr-4 text-indigo-600 flex-shrink-0">
                            <i class="fas fa-wallet text-xl"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold mb-2 text-gray-800">灵活的版本选择</h3>
                            <p class="text-gray-600">免费社区版功能丰富，专业版支持企业级功能，满足不同规模团队需求。</p>
                        </div>
                    </div>
                    
                    <div class="flex items-start">
                        <div class="bg-green-100 w-12 h-12 rounded-lg flex items-center justify-center mr-4 text-green-600 flex-shrink-0">
                            <i class="fas fa-desktop text-xl"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold mb-2 text-gray-800">跨平台支持</h3>
                            <p class="text-gray-600">支持 Windows、macOS、Linux 三大操作系统，无论您使用什么设备，都能获得一致的使用体验。</p>
                        </div>
                    </div>
                </div>
                
                <div class="relative">
                    <div class="bg-gray-50 rounded-2xl p-6 shadow-md">
                        <div class="mermaid" data-processed="true">
                            pie
                            title HexHub 功能优势
                            "数据库管理" : 35
                            "SSH/SFTP" : 25
                            "Docker管理" : 20
                            "系统监控" : 15
                            "其他功能" : 5
                        </div>
                    </div>
                    <div class="absolute -top-4 -right-4 bg-yellow-100 text-yellow-800 px-4 py-2 rounded-lg font-bold shadow-sm">专业版优惠码: you-can-pass</div>
                </div>
            </div>
        </div>
    </section>

    <!-- Getting Started Section -->
    <section class="py-16 bg-gray-50">
        <div class="container mx-auto max-w-6xl px-4">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4 text-gray-800">快速上手</h2>
                <p class="text-lg text-gray-600 max-w-2xl mx-auto">只需简单几步，开始您的 HexHub 之旅</p>
            </div>
            
            <div class="grid md:grid-cols-4 gap-6">
                <div class="bg-white rounded-xl p-6 text-center shadow-sm border border-gray-100">
                    <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 text-blue-600">
                        <span class="text-2xl font-bold">1</span>
                    </div>
                    <h3 class="text-lg font-bold mb-2 text-gray-800">下载安装</h3>
                    <p class="text-gray-600 text-sm">访问官网下载社区版，支持 Windows、macOS、Linux</p>
                </div>
                
                <div class="bg-white rounded-xl p-6 text-center shadow-sm border border-gray-100">
                    <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 text-purple-600">
                        <span class="text-2xl font-bold">2</span>
                    </div>
                    <h3 class="text-lg font-bold mb-2 text-gray-800">创建连接</h3>
                    <p class="text-gray-600 text-sm">打开应用，创建数据库或 SSH 连接，输入主机、账号、密码</p>
                </div>
                
                <div class="bg-white rounded-xl p-6 text-center shadow-sm border border-gray-100">
                    <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 text-green-600">
                        <span class="text-2xl font-bold">3</span>
                    </div>
                    <h3 class="text-lg font-bold mb-2 text-gray-800">配置管理</h3>
                    <p class="text-gray-600 text-sm">配置 SFTP 或 Docker 面板，选择监控指标，设置个性化选项</p>
                </div>
                
                <div class="bg-white rounded-xl p-6 text-center shadow-sm border border-gray-100">
                    <div class="bg-red-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 text-red-600">
                        <span class="text-2xl font-bold">4</span>
                    </div>
                    <h3 class="text-lg font-bold mb-2 text-gray-800">高效工作</h3>
                    <p class="text-gray-600 text-sm">使用多窗口界面管理任务，保存配置以同步，开始高效工作</p>
                </div>
            </div>
            
            <div class="mt-16 text-center">
                <h3 class="text-2xl font-bold mb-6 text-gray-800">准备好提升您的工作效率了吗？</h3>
                <a href="https://www.hexhub.cn/" class="bg-gradient-to-r from-blue-500 to-purple-600 text-white font-bold py-3 px-8 rounded-lg cta-button inline-flex items-center">
                    <i class="fas fa-rocket mr-2"></i> 立即下载 HexHub
                </a>
                <p class="text-gray-500 text-sm mt-4">免费社区版 • 无需强制登录 • 4GB内存推荐</p>
            </div>
        </div>
    </section>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            },
            pie: {
                useWidth: 300,
                showPercentage: true,
                showDataLabels: true
            }
        });
    </script>
</body>
</html>